<template>
	<view class="page-content">

		<view class="p15">
			<view class="module-info u-f-item pt15" @click="toPage('/pages/member/setting/index')">
				<u-avatar size="110" :src="userInfo.avatar"></u-avatar>
				<view class="pl12 u-f1 u-f-jsb u-f-item" style="color: #000;">
					<view v-if="isLogin">
						<view class="fz18 u-font-bold">{{userInfo.nickname || ''}}</view>
						<view class="fz13 mt4">{{userInfo.mobile || ''}}</view>

					</view>
					
					<view v-else>
						请登录
					</view>
					<u-icon name="arrow-right" color="#000"></u-icon>
				</view>
			</view>

			<view class="bg-white brs10  mt20 pl15">
				<view class="u-flex p15 pl0 u-f-jsb bm" @click="toPage('/pages/user/car/list')">
					<view class="u-flex">
						<image src="../../static/image/ic-car.png"  class="icon-action h28" mode="heightFix"></image>
						<view class="fz15 ml10">我的车辆</view>
					</view>

					<u-icon name="arrow-right" color="#000"></u-icon>
				</view>
				<view class="u-flex p15 pl0 u-f-jsb bm" @click="toCall">
					<view class="u-flex">
						<image src="../../static/image/ic-ke.png" class="icon-action h28" mode="heightFix"></image>
						<view class="fz15 ml10">客服电话</view>
					</view>

					<u-icon name="arrow-right" color="#000"></u-icon>
				</view>
				<view class="u-flex p15 pl0 u-f-jsb" @click="toOrder">
					<view class="u-flex">
						<image src="../../static/image/ic-order.png" class="icon-action h28" mode="heightFix"></image>
						<view class="fz15 ml10">订单统计</view>
					</view>
					<u-icon name="arrow-right" color="#000"></u-icon>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curTab: 4,
				isLogin: false,
				background: {},
				userInfo: {}
			}
		},
		computed: {
		},
		onLoad() {},
		onShow() {
			if (this.$db.get("userToken")) {
				
					this.isLogin = true
					this.userInfo = this.$db.get("userinfo");
			}
		},
		methods: {
			toCall(){
				
				this.$api.config({}, res => {
					if (res.code) {
						
						
						uni.makePhoneCall({
							phoneNumber:res.data.kefu
						})
					}
				})
			},
			toOrder(){
				uni.switchTab({
					url:'/pages/order/index'
				})
			},
			// 关于我们
			goAgreement() {
				let articleId = this.$store.state.config.about_article_id;
				this.$common.navigateTo('/pages/article/index?id_type=1&id=' + articleId);
			},

			toPage(url) {
				if (!this.isLogin) {

					this.$common.errorToShow('请先登录！')
					uni.navigateTo({
						url: "/pages/user/auth"
					})
				} else {

					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style>
	.page-content {
		background: #f5f5f5;
		background-repeat: no-repeat;
		background-size: 100%;
		overflow-x: hidden;
	}

	.box {
		background: #FFFFFF;
		box-shadow: 0 8rpx 20rpx rgba(252, 148, 110, 0.2);
		border-radius: 30rpx;
		padding-top: 40rpx;
	}

	.box2 {
		background: #FFFFFF;
		box-shadow: 0 8rpx 20rpx rgba(252, 148, 110, 0.2);
		border-radius: 30rpx;
		overflow: hidden;
	}

	.scroll-w {
		white-space: nowrap;
		padding: 0 0 30rpx 30rpx;
	}

	.item {
		display: inline-flex;
		margin-right: 30rpx;
		box-sizing: border-box;
		width: 142px;
		height: 120px;
		background: #FFFEF9;
		border: 1px solid #FFEEBE;
		border-radius: 20px 40px;
	}

	.item>view {
		color: #444444;
	}

	.active {
		background: linear-gradient(148.96deg, #FBD2B2 9.06%, #FFF2DF 62.11%);
		border: 4px solid #F69978;
	}

	.active>view {
		color: #795121;
	}

	.btn {
		box-sizing: border-box;
		width: 654rpx;
		height: 108rpx;
		background: linear-gradient(90.08deg, #FBD7AB 24.9%, #FDF5DE 63.14%, #FBD7AB 81.74%);
		border: 1rpx solid #C26432;
		box-shadow: 0px 4px 10px rgba(251, 215, 171, 0.3);
		border-radius: 12px;
		margin-top: 200rpx;
		color: #722907;
		font-size: 32rpx;
		font-weight: bold;
	}

	.item-action {
		width: 25%;
		min-width: 25%;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.icon-action {
		display: block;
		margin: 0 auto;
	}

	.kefu-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
	}
</style>